<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：<router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/productionBasismanag/productionBasismanagDj" style="color: #409eff;">自动生产管理</router-link>>
        </div>

        <div class="hei10"></div>

        <div class="t_add_cont">
          <router-link class="back" to="/productionBasismanag"><i class="el-icon-back"></i>返回产品渠道管理</router-link>
          <div style="padding: 20px; background:rgb(238, 247, 255); margin: 20px 0; color: #555;">
            应用场景：同一个产品各省都有，各省给予的佣金不同，或者不发外省等场景。
            功能说明：订单优先判断条件接口，当订单的收货地址不满足条件接口时则自动提交至主要接口。
          </div>
          <div style='margin-bottom:10px'>
            <el-button @click="opendev(0)" round type="danger">新增主要提单接口</el-button>
            <el-button @click="opendev(1)" round type="danger">新增条件提单接口</el-button>
          </div>
          <el-table :header-cell-style="{background:'#E6E6E6',color:'#3D3D3D'}" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="接口名称">
              <template slot-scope="scope">
                <div v-if="scope.row.user_defined_name">{{scope.row.user_defined_name}}</div>
                <div v-if="!scope.row.user_defined_name">{{scope.row.c_name}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="sku" label="接口类型">

              <template slot-scope="scope">
                <div v-if="scope.row.first_order == 0">主要提单接口</div>
                <div v-if="scope.row.first_order != 0">条件提单接口</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="触发条件收货地址">
              <template slot-scope="scope">
                <div>{{scope.row.first_province}}</div>
                <div>{{scope.row.first_city}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="" label="年龄条件">
              <template slot-scope="scope">
                <span v-if="scope.row.end_age!=0">{{ scope.row.start_age }}-{{ scope.row.end_age }}</span>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="添加时间">
            </el-table-column>
            <el-table-column align="center" label="优先级">
              <template slot-scope="scope">
                <div v-if="scope.row.first_order != 0">{{scope.row.first_order}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="first_order" label="选号">
              <template slot-scope="scope">
                <div v-if="scope.row.take_number == 0">未开启</div>
                <div v-if="scope.row.take_number != 0">已开启</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button @click="del(scope.row.id)" type="text">删除</el-button>
                <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>

    <!-- 添加/编辑 -->
    <el-dialog center :title="tit" :visible.sync="addproshow" width="600px" :close-on-click-modal="false">
      <div class="kflexc" style="margin-bottom: 10px;" v-if="inputadd.first_order != 0">
        <div style="display:flex;margin-bottom: 20px;align-items: center;">
          <div style="color: rgb(136, 137, 137);">选择条件：</div>
          <el-select @change="changetdtype" v-model="choosetdtype" style="width: 120px;" clearable placeholder="选择条件">
              <el-option label="年龄条件" value="1"></el-option>
              <el-option label="归属省条件" value="2"></el-option>
          </el-select>
        </div>
        <div v-if="choosetdtype=='1'" class="t_age_a_box" style="margin-bottom: 10px;" >
           <div style="color: rgb(136, 137, 137);">用户年龄区间：</div>
           <el-input  v-model="inputadd.start_age" placeholder="起始年龄"></el-input>
           <span style="margin-right: 20px;">——</span>
           <el-input  v-model="inputadd.end_age" placeholder="结束年龄"></el-input>
        </div>
        <div v-if="choosetdtype=='2'">
            <div style="color: rgb(136, 137, 137);margin-bottom: 10px;">当用户收件地址为：</div>
            <diqu :cengshu="2" :sheng="inputadd.first_province" :shi="inputadd.first_city" @chuandizhi="chuandizhi" v-if="relo"></diqu>

            <!-- <div style="color: rgb(136, 137, 137);margin-bottom: 10px; margin-top: 10px;">兼容上一版：</div>
            <el-select  v-model="inputadd.first_province" style="width: 120px;margin-bottom: 20px;" clearable placeholder="请选择省份:">
              <el-option label="北京市" value="北京市"></el-option>
              <el-option label="天津市" value="天津市"></el-option>
              <el-option label="河北省" value="河北省"></el-option>
              <el-option label="山西省" value="山西省"></el-option>
              <el-option label="内蒙古自治区" value="内蒙古自治区"></el-option>
              <el-option label="吉林省" value="吉林省"></el-option>
              <el-option label="黑龙江省" value="黑龙江省"></el-option>
              <el-option label="上海市" value="上海市"></el-option>
              <el-option label="江苏省" value="江苏省"></el-option>
              <el-option label="浙江省" value="浙江省"></el-option>
              <el-option label="安徽省" value="安徽省"></el-option>
              <el-option label="辽宁省" value="辽宁省"></el-option>
              <el-option label="福建省" value="福建省"></el-option>
              <el-option label="江西省" value="江西省"></el-option>
              <el-option label="山东省" value="山东省"></el-option>
              <el-option label="河南省" value="河南省"></el-option>
              <el-option label="湖北省" value="湖北省"></el-option>
              <el-option label="湖南省" value="湖南省"></el-option>
              <el-option label="广东省" value="广东省"></el-option>
              <el-option label="广西壮族自治区" value="广西壮族自治区"></el-option>
              <el-option label="海南省" value="海南省"></el-option>
              <el-option label="重庆市" value="重庆市"></el-option>
              <el-option label="四川省" value="四川省"></el-option>
              <el-option label="贵州省" value="贵州省"></el-option>
              <el-option label="云南省" value="云南省"></el-option>
              <el-option label="西藏自治区" value="西藏自治区"></el-option>
              <el-option label="陕西省" value="陕西省"></el-option>
              <el-option label="甘肃省" value="甘肃省"></el-option>
              <el-option label="青海省" value="青海省"></el-option>
              <el-option label="宁夏回族自治区" value="宁夏回族自治区"></el-option>
              <el-option label="新疆维吾尔自治区" value="新疆维吾尔自治区"></el-option>
              <el-option label="台湾省" value="台湾省"></el-option>
              <el-option label="香港特别行政区" value="香港特别行政区"></el-option>
              <el-option label="澳门特别行政区" value="澳门特别行政区"></el-option>
            </el-select> -->
            <div style="color: rgb(136, 137, 137);">则自动提单至下方接口</div>
        </div>

      </div>
      <div style="margin-bottom: 20px;">
        <el-select v-model="inputadd.channel_id" @change="getpeizhi" style="width: 100%;" filterable placeholder="请选择已对接的接口">
          <el-option :label="item.user_defined_name" :value="item.channel_id" v-for="item in jiekouqudaolist"
            :key="item.id"></el-option>
        </el-select>
      </div>
      <el-form label-width="120px" v-if="inputadd.channel_id">
        <el-form-item label="对应上游编码">
          <el-input v-model="inputadd.upstream_product_name" placeholder="请输入对应上游编码" size="small"></el-input>
        </el-form-item>
        <el-form-item label="优先级" v-if="inputadd.first_order != 0">
          <el-input v-model="inputadd.first_order" placeholder="请输入优先级(不能重复)" size="small"></el-input>
        </el-form-item>
        <el-form-item v-for="(item,index) in inputlistall" :key="index" :label="item.name">
          <el-input v-if='item.type=="text"' @input="inputChange" v-model="inputadd.data[item.key]" size="small"
            :type="item.type"></el-input>
          <el-radio-group v-if='item.type=="radio"' v-model="inputadd.data[item.key]">
            <el-radio @change="inputChange" v-for="(item2,index2) in item.data" :key="index2"
              :label="item2.value">{{item2.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="kflexcc" style="width: 100%; margin-top: 20px;">
        <el-button @click="addpro" type="danger" round>确定</el-button>
      </div>
    </el-dialog>

    <el-dialog center title="提醒" :visible.sync="bunengxuanhaolog" width="600px" :close-on-click-modal="false">
      <div style="color: rgb(86, 86, 86);">
        您要添加的接口支持选号，因支持选号的产品无法实现多接口提单，
        所以该接口添加后此产品仍然不支持选号。
      </div>
      <div class="kflexcc" style="width: 100%; margin-top: 20px;">
        <el-button @click="bunengxuanhaolog = false" type="danger" round>确定</el-button>
      </div>
    </el-dialog>

    <el-dialog center title="添加确认" :visible.sync="bunengxuanhaolog2" width="600px" :close-on-click-modal="false">
      <div style="color: rgb(86, 86, 86);">
        该产品目前已开启选号支持开关，添加条件接口会导致该产品无法
        支持选号，仍要添加条件接口么？
      </div>
      <div class="kflexcc" style="width: 100%; margin-top: 20px;">
        <el-button @click="quedingkai" type="danger" round>确定</el-button>
        <el-button @click="bunengxuanhaolog2 = false" type="info" round>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import diqu from './tongyidizhi/zidongshengchanguanli.vue'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      diqu
    },
    name: 'productionBasismanagDj',
    data() {
      return {
        bunengxuanhaolog:false,
        bunengxuanhaolog2:false,
        linshi:"",
        tableData: [],
        //联系微信客服弹窗
        chatwxshow: false,
        //添加弹窗
        addproshow: false,
        //添加数据
        inputadd: {
          channel_id: '',
          data:{

          },
          first_city: '',
          first_order: '',
          first_province: '',
          id: '',
          product_id: '',
          upstream_product_name: '',
          start_age:"",
          end_age:''
        },
        //动态input
        inputlist: [],
        //动态radio
        radiolist: [],
        //所有动态数据
        inputlistall: [],
        //y_name
        y_name: '',
        //是否点击检查
        ischeck: false,
        //没有配置
        nopz: true,
        //上游编码
        upbm: '',
        upimglink: '',
        get_product_id: '',
        showgetzy: false,
        nowzyid: '',
        shopid: "",
        jiekouqudaolist: "",
        tit:"",
        choosetdtype:'',

        relo:true
      }
    },
    created() {
      //获取列表
      this.getlist()
      //店铺权限问题
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;

      this.getjiekouqudao()


    },

    methods: {
      chuandizhi:function(val){
        this.inputadd.first_province = val.sheng
        this.inputadd.first_city = val.shi
      },

      getjiekouqudao: function() {
        axios.get('/api/plan-market/upstream/channel/config/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.jiekouqudaolist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getpeizhi: function() {

        axios.get('/api/plan-market/upstream/product/list?channel_id=' + this.inputadd.channel_id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.inputadd.upstream_product_name = ""
              this.inputadd.data = {}

              this.inputlistall = JSON.parse(response.data.data[0].upstream_config_type)

              if(response.data.data[0].take_number != 0 && this.inputadd.first_order != 0){
                this.bunengxuanhaolog = true
              }

              //添加数据绑定
              for (var i = 0; i < this.inputlistall.length; i++) {
                if (this.inputlistall[i].type == 'text') {
                  this.$set(this.inputadd.data,this.inputlistall[i].key,'')

                  this.inputlist.push(this.inputlistall[i])
                } else if (this.inputlistall[i].type == 'radio') {
                  this.$set(this.inputadd.data,this.inputlistall[i].key,null)

                  this.radiolist.push(this.inputlistall[i])
                }
              }
              console.log(this.inputadd)

            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },

      //获取列表
      getlist() {
        axios.get('/api/plan-market/product/up/products?id=' + this.$route.query.id)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //、编辑
      bianji:function(item){


        console.log(item)
        if(item.first_order == 0){
          this.tit = '编辑主要提单接口'
        }else{
          this.tit = '编辑条件提单接口'
        }
        this.inputadd.channel_id = item.channel_id

        let d = JSON.parse(item.data)
        axios.get('/api/plan-market/upstream/product/list?channel_id=' + this.inputadd.channel_id)
          .then(response => {
            if (response.data.msg.code == 0) {
              if(response.data.data && response.data.data[0].upstream_config_type != ''){
                this.inputlistall = JSON.parse(response.data.data[0].upstream_config_type)
                //添加数据绑定
                for (var i = 0; i < this.inputlistall.length; i++) {
                  if (this.inputlistall[i].type == 'text') {
                    this.$set(this.inputadd.data,this.inputlistall[i].key,d[this.inputlistall[i].key])
                    this.inputlist.push(this.inputlistall[i])
                  } else if (this.inputlistall[i].type == 'radio') {
                    this.$set(this.inputadd.data,this.inputlistall[i].key,d[this.inputlistall[i].key])
                    this.radiolist.push(this.inputlistall[i])
                  }
                }
              }
                this.inputadd.first_city = item.first_city
                this.inputadd.first_order = item.first_order
                this.inputadd.first_province = item.first_province

                this.relo = false
                this.$nextTick(()=>{
                  this.relo = true
                })

                this.inputadd.start_age = item.start_age
                this.inputadd.end_age = item.end_age
                this.inputadd.id = item.id
                this.inputadd.product_id = item.product_id
                this.inputadd.upstream_product_name = item.upstream_product_name



                if(this.inputadd.start_age==0&&this.inputadd.end_age==0){
                  this.inputadd.start_age=''
                  this.inputadd.end_age=''
                }


                if(item.first_province){
                  this.choosetdtype ='2'
                }else{
                  this.choosetdtype = '1'
                }

                console.log(this.inputadd)

                this.addproshow = true


            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      quedingkai:function(){
        this.opendev(this.linshi,true)
        this.bunengxuanhaolog2 = false
      },
      //添加
      opendev(index,queren) {
          this.linshi = index
          let youxuanhao = false
          if(this.tableData.length > 0){
            this.tableData.forEach(item=>{
              if(item.take_number != 0){
                youxuanhao = true
              }
            })
            //queren = false
            if(youxuanhao && !queren && index != 0){
              this.bunengxuanhaolog2 = true
              return false
            }
          }

          this.inputadd = {
            channel_id:'',
            data:{},
            first_city: '',
            first_order: '',
            first_province: '',
            id: '',
            product_id: '',
            upstream_product_name: '',
            start_age:'',
            end_age:'',
          }
          this.relo = false
          this.$nextTick(()=>{
            this.relo = true
          })
          //新增
          if(index == 0){
            this.inputadd.first_order = 0
            this.tit = '添加主要提单接口'
          }else{
            this.tit = '添加条件提单接口'
            this.inputadd.first_order = this.tableData.length + 1

            if(this.tableData.length > 0){
              this.inputadd.first_order = this.tableData[this.tableData.length - 1].first_order + 1
            }
          }

          this.inputadd.product_id = this.$route.query.id
          this.addproshow = true
      },
      //确定提交
      addpro() {
        if(this.choosetdtype==1){
          if(this.inputadd.first_order != 0 && (this.inputadd.start_age == ''||this.inputadd.end_age == '')){
            this.$message.error('请输入年龄');
            return false
          }
        }else if(this.choosetdtype==2){
          if(this.inputadd.first_order != 0 && this.inputadd.first_province == ''){
            this.$message.error('请选择省份');
            return false
          }
        }


        let obj = {
          channel_id: this.inputadd.channel_id,
          data: JSON.stringify(this.inputadd.data),
          first_city: this.inputadd.first_city,
          first_order: this.inputadd.first_order,
          first_province: this.inputadd.first_province,
          id: this.inputadd.id,
          product_id: this.inputadd.product_id,
          upstream_product_name: this.inputadd.upstream_product_name,
          start_age:this.inputadd.start_age,
          end_age:this.inputadd.end_age,
        }

        axios.post('/api/plan-market/make/up/product', obj)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              //获取列表
              this.getlist()
              this.addproshow = false
            }else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //检查编码
      checkbm(product_sku) {
        axios.get('/api/plan-market/upstream/check/product', {
            params: {
              product_sku: product_sku
            }
          })
          .then((response) => {
            this.ischeck = true
            console.log(response)
            if (response.data.data == null) {
              this.nopz = true
            } else {
              this.nopz = false
              this.upbm = response.data.data.upstream_product_name
            }

          })
      },
      //删除
      del(up_id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/upstream/product/delete', {
              id: up_id
            })
            .then((response) => {
              console.log(response)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //获取列表
              this.getlist()
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //点击打开客服二维码弹窗
      openwx() {
        this.chatwxshow = true
      },
      inputChange() {
        this.$forceUpdate(); //强制刷新
      },
      changetdtype(val){
        if(val=='1'){
          this.inputadd.first_province = ''
        }else{
          this.inputadd.start_age = ''
          this.inputadd.end_age = ''
        }
      }

    }
  }
</script>

<!--

shhhh
12312312312
samguo
chihihuh -->
<style scoped>
.t_age_a_box{
  display: flex;
  align-items: center;
}

/deep/ .t_age_a_box .el-input{
  width: 150px !important;
  min-width: auto !important;
}
/deep/.t_age_a_box .el-input .el-input__inner{
  width: 150px !important;
}
</style>
<style lang="scss" scoped>
  .index {
    /deep/ .el-select {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input__inner {
      line-height: 36px;
      height: 36px;
      font-size: 12px;
      background: rgb(247, 248, 250);
      border: 0;
    }

    /deep/ .el-range-editor .el-range-input {
      background: #f7f8fa;
    }

    /deep/ .el-button {
      padding: 11px 23px !important;
    }

    /deep/ .el-button--text {
      padding: 11px 0 !important;
    }

    /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
    }

    /deep/ .el-input__inner:-moz-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .td2 .el-button {
      padding: 11px 0px !important;
    }

    /deep/ .pagination-container .el-select {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input__inner {
      line-height: 28px;
      height: 28px;
    }

    /deep/ .el-pagination.is-background .btn-prev:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .btn-prev {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2974FF;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
      color: #fff;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #2974FF;
    }

    /deep/ .el-pager li {
      border-radius: 14px;
      background: rgba(255, 255, 255, 1);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .btn-prev {
      border-radius: 14px;
      padding: 0 10px;
    }

    /deep/ .btn-next {
      border-radius: 14px;
      padding: 0 10px;
    }

    .t_add_cont {
      padding: 30px 10px;
    }

    .t_tips_box {
      background-color: #EEF7FF;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      padding: 20px;
      color: #7D7D7D;
      margin-bottom: 20px;
    }

    .t_chatkf {
      color: #237BFF;
      margin-left: 20px;
      cursor: pointer;
    }

    .back {
      color: black;
      margin-bottom: 15px;
      display: block;
    }

    .t_btn_box {
      display: flex;
      justify-content: end;
    }

    .see {
      color: #409EFF;
      margin: 20px 0;
      cursor: pointer;
    }

    .cpflex {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .kucun {
      /deep/ .el-input {
        width: 200px;
      }

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }



    .o_ul {
      background: #F9F9F9;
      display: flex;

      .o_li {
        flex-basis: 160px;
        line-height: 45px;
        display: block;
        color: #727272;
        border-top: 3px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .act {
        border-top: 3px #DD2727 solid;
        background: #FFFFFF;
      }
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .bsm {
      padding: 20px 20px 0 20px;

      .el-input {
        width: 220px;
      }
    }

    .row2 {
      color: #FFF;
      margin-top: 20px;

      a {
        color: #FFF;
      }
    }

    .con {
      margin: 20px;
      border: 1px #EAEAEA solid;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }

    .el-pagination {
      text-align: right;
      margin-right: 20px;
      padding-bottom: 50px;
    }


  }
</style>
